<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-show="headerShow" style="padding-top:15px">
        <a-form size="small" :model="query" layout="inline">
          <a-form-item label="入库单号" v-if="activeNme != '2'" prop="stockInCode">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.stockInCode"/>
          </a-form-item>

          <a-form-item label="客户名称" prop="customName">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.customName"/>
          </a-form-item>

          <a-form-item label="织布单号" prop="planOrderCode">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.planOrderCode"/>
          </a-form-item>

          <a-form-item label="出库单号" v-if="activeNme == '2'" prop="stockOutCode">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.stockOutCode"/>
          </a-form-item>

          <a-form-item label="坯布单号" v-if="activeNme != '2'" prop="greyCode">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.greyCode"/>
          </a-form-item>

          <a-form-item label="日期" v-if="activeNme != '2'" prop="beginDate">
            <!-- <el-date-picker
      type="date"
      placeholder="选择开始日期"
      v-model="query.beginDate"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
    /> -->
            <a-date-picker popup-container="html" v-model="query.beginDate" :style="{ width: '230px' }"
                           placeholder="选择开始日期"
                           class="bacClass"/>
          </a-form-item>

          <a-form-item label="至" v-if="activeNme != '2'" prop="endDate">
            <!-- <el-date-picker
      type="date"
      placeholder="选择结束日期"
      v-model="query.endDate"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
    /> -->
            <a-date-picker popup-container="html" v-model="query.endDate" :style="{ width: '240px' }"
                           placeholder="选择开始日期"
                           class="bacClass"/>
          </a-form-item>

          <CorporateSectorCascader v-if="activeNme != '2'" :configCascader="configCascader2"
                                   @changeCascader="changeCascader2"/>

          <a-form-item label="仓库" v-if="activeNme != '2'">
            <a-select popup-container="html" class="bacClass" :style="{ width: '225px' }" v-model="query.warehouseName"
                      :disabled="query.companyName == ''" allow-clear>
              <a-option v-for="item in pageData.inShelveList2" :key="item.id" :value="item.warehouseName">
                {{ item.warehouseName }}
              </a-option>
            </a-select>
            <!-- <el-select
      v-model="query.warehouseName"
      @focus="focusShelve2"
      filterable
      placeholder="选择仓库"
      :disabled="query.companyName"
    >
      <el-option
        v-for="item in pageData.inShelveList"
        :key="item.id"
        :label="item.warehouseName"
        :value="item"
        :loading="pageData.loading"
      />
    </el-select> -->
          </a-form-item>
        </a-form>
      </div>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <el-button v-if="activeNme == '2'" @click="splitAdjustment()">入库</el-button>
          <el-button v-if="activeNme == '1'" @click="audit()" :icon="EditPen">审核</el-button>
        </a-space>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <a-tabs   :lazy-load="true" type="card" @change="activeChange" justify :default-active-key="activeNme">
        <a-tab-pane title="待处理" key="2">
          <div style="width: 100%; height: 100%">
            <encapsulation-agrid ref="refgridOption1" :configaggrid="configaggrid1"></encapsulation-agrid>
          </div>
        </a-tab-pane>
        <a-tab-pane title="未审核" key="1">
          <div style="width: 100%; height: 92%">
            <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
          </div>
        </a-tab-pane>
        <a-tab-pane title="已审核" key="3">
          <div style="width: 100%; height: 92%">
            <encapsulation-agrid ref="refgridOption2" :configaggrid="configaggrid2"></encapsulation-agrid>
          </div>
        </a-tab-pane>
      </a-tabs>
    </template>
    <el-dialog style="width: 500px" v-model="pageData.dialogFormVisible" v-loading="loadingElplus">
      <el-form :model="form">
        <el-form-item label="入库类型" prop="stockInType" label-width="80px">
          <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="form.stockInType"
                   style="width: 200px" disabled/>
        </el-form-item>
        <el-form-item label="仓库:" label-width="80px">
          <el-select v-model="form.warehouseId" @focus="focusShelve" filterable placeholder="选择仓库">
            <el-option v-for="item in pageData.inShelveList" :key="item.id" :label="item.warehouseName"
                       :value="item.id" :loading="pageData.loading"/>
          </el-select>
        </el-form-item>
        <el-form-item label="布笼:" label-width="80px">
          <el-select v-model="form.shelveId" @focus="focusShelve1" filterable placeholder="选择布笼"
                     :disabled="!form.warehouseId">
            <el-option v-for="item in pageData.inShelveList1" :key="item.id" :label="item.shelveName"
                       :value="item.id" :loading="pageData.loading"/>
          </el-select>
        </el-form-item>
        <!-- <el-select
        v-model="form.inShelveId"
        @focus="focusShelve"
        filterable
        placeholder="选择调整布笼"
      >
        <el-option
          v-for="item in pageData.inShelveList"
          :key="item.id"
          :label="item.shelveName"
          :value="item.id"
          :loading="pageData.loading"
        />
      </el-select> -->

        <!-- <el-form-item label="入库类型:" label-width="80px">
      <el-select
        v-model="form.stockInType"
        @focus="focusShelve3"
        filterable
        placeholder="选择入库类型"
        :disabled="!form.warehouseId"
      >
        <el-option
          v-for="item in pageData.inShelveList3"
          :key="item.id"
          :label="item.shelveName"
          :value="item.id"
          :loading="pageData.loading"
        />
      </el-select>
    </el-form-item> -->
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="pageData.dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="save"> 确认 </el-button>
                </span>
      </template>
    </el-dialog>
    <a-drawer cancel-text="关闭" popup-container=".arco-tabs-content" height="80vh" placement="bottom"
              :visible="pageData.showAdd" unmountOnClose @cancel="pageData.showAdd = false" :mask-closable="false">
      <template #title> 详情</template>
      <div style="width: 100%; height: 100%">
        <encapsulation-agrid ref="refgridOption2" :configaggrid="configaggrid2"></encapsulation-agrid>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
// 引入element提示
import {ElMessage, ElMessageBox} from 'element-plus'
//引入封装post
import {post} from '@/api/http'
import buttionRender from '@/components/aggridCellRenDerer/buttionRender.vue'
import {tableColumns, tableColumns1, tableColumns2} from './index'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import {Search, EditPen} from '@element-plus/icons-vue'

interface Pagein {
  btnList: any
  dataList: any
  dialogFormVisible: boolean
  pageType: string
  showAdd: boolean
  loading: boolean
  inShelveList: any
  inShelveList1: any
  inShelveList2: any
  inShelveList3: any
}

const headerShow = ref(true)


// 跟请求参数无关的放这里
let pageData = reactive<Pagein>({
  btnList: ['查询', '导出'], // 按钮列表
  dataList: [],
  dialogFormVisible: false,
  pageType: '',
  showAdd: false,
  loading: false,
  inShelveList: [],
  inShelveList1: [],
  inShelveList2: [],
  inShelveList3: [],
})

interface Querin {
  planOrderCode: Number | String
  customOrderNo: Number | String
  greyCode: Number | String
  customName: Number | String
  stockInCode: Number | String
  endDate: string
  beginDate: string
  warehouseName: string
  companyName: string
  companyId: Number | String
  stockInTypeId: Number | String
  stockInType: Number | String
  auditState: Number | String
  stockOutTypeId: Number | String
  stockOutCode: any
}

const form = ref<any>({})
//getlist初始化接口参数
let query = reactive<Querin>({
  customName: '',
  planOrderCode: '',
  customOrderNo: '',
  greyCode: '',
  stockInCode: '',
  endDate: '',
  beginDate: '',
  warehouseName: '',
  companyName: '',
  companyId: '',
  stockInTypeId: 22,
  stockInType: '染厂退库',
  auditState: '1',
  stockOutTypeId: 22,
  stockOutCode: ''
})
//tabs选中的值
let activeNme = ref<string>('2')
// loding.....
let loadingElplus = ref<boolean>(false)

const activeChange = (val: any) => {
  query.customName = ''
  query.planOrderCode = ''
  query.customOrderNo = ''
  query.greyCode = ''
  query.stockInCode = ''
  query.endDate = ''
  query.beginDate = ''
  query.companyName = ''
  query.warehouseName = ''
  query.companyId = ''
  activeNme.value = val
  getList()
}
const changeCascader2 = (data: any) => {
  const {corporateId, corporateLabel} = data
  query.companyName = corporateLabel
  query.companyId = corporateId
  focusShelve2()
}
const configCascader2 = ref<{}>({
  corporateWidth: '230px', //公司宽度
  size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
  corporateName: '公司', //公司label
  cascaderShow: 'sector', //配置部门不显示
})
const selsetionList = ref<any>([])
const splitAdjustment = () => {
  let selsetionList1 = refgridOption1.value.getSelectedRows()
  if (selsetionList1.length == 0) {
    ElMessage.warning('请选择您的单据')
    return
  }
  let condition = selsetionList1.every(
      (item: any) => item.customName === selsetionList1[0].customName
  )
  if (!condition) {
    ElMessage.warning('请选择客户名称相同的单据')
    return
  }
  form.value.companyId = ''
  form.value.warehouseId = ''
  form.value.shelveId = ''
  form.value.stockInType = '染厂退库'
  form.value.stockInTypeId = 22
  //   form.value = selsetionList[0]
  selsetionList.value = selsetionList1
  pageData.dialogFormVisible = true
}
let refgridOption = ref<any>()
let refgridOption1 = ref<any>()
let refgridOption2 = ref<any>()
// 未审核
let configaggrid = ref({
  url: '/wms/GreyStockIn/getPage', //接口路径
  queryData: {
    //接口参数
    customName: query.customName,
    planOrderCode: query.planOrderCode,
    customOrderNo: query.customOrderNo,
    greyCode: query.greyCode,
    stockInCode: query.stockInCode,
    beginDate: query.beginDate,
    endDate: query.endDate,
    stockInTypeId: 22,
    stockInType: '染厂退库',
    auditState: 0,
  },
  paginationShow: true, //分页是否显示
  invokeiIterface: true, //是否调用接
  rowMultiSelectWithClick: true, //点击行是否多选
  column: tableColumns,
})
// 未处理
let configaggrid1 = ref({
  url: '/wms/GreyStockIn/getBlankReturnDataLink', //接口路径
  queryData: {
    //接口参数
    customName: query.customName,
    planOrderCode: query.planOrderCode,
    stockOutTypeId: 22,
    stockInType: '染厂退库',
  },
  paginationShow: true, //分页是否显示
  invokeiIterface: true, //是否调用接
  rowMultiSelectWithClick: true, //点击行是否多选
  //   checkboxShow: true,
  column: tableColumns1,
})
// 已审核
let configaggrid2 = ref({
  url: '/wms/GreyStockIn/getPage', //接口路径
  queryData: {
    //接口参数
    customName: query.customName,
    planOrderCode: query.planOrderCode,
    customOrderNo: query.customOrderNo,
    greyCode: query.greyCode,
    stockInCode: query.stockInCode,
    beginDate: query.beginDate,
    endDate: query.endDate,
    stockInTypeId: 22,
    stockInType: '染厂退库',
    auditState: 1,
  },
  paginationShow: true, //分页是否显示
  invokeiIterface: true, //是否调用接
  rowMultiSelectWithClick: false, //点击行是否多选
  column: tableColumns2,
})
const save = async () => {
  if (!form.value.warehouseId) {
    ElMessage.error('请选择您的仓库')
    return
  }
  if (!form.value.shelveId) {
    ElMessage.error('请选择您的布笼')
    return
  }
  let parData = selsetionList.value.reduce((pre: any, cur: any) => {
    return pre.concat({
      companyId: cur.companyId,
      warehouseId: form.value.warehouseId,
      shelveId: form.value.shelveId,
      stockInType: form.value.stockInType,
      stockInTypeId: 22,
      areaId: cur.areaId,
      clothfiyId: cur.clothfiyId,
      greyCode: cur.greyCode,
      greyName: cur.greyName,
      greyBatchNo: cur.greyBatchNo,
      planOrderCode: cur.planOrderCode,
      clothfiyCode: cur.clothfiyCode,
      weight: cur.weight,
      horseNo: cur.horseNo,
      machineGreyCode: cur.machineGreyCode,
      machineCode: cur.machineCode,
      parentId: cur.parentId,
      circulatCard: cur.circulatCard,
      clothCode: cur.clothCode,
      yarnBatch: cur.yarnBatch,
      stockInCode: cur.stockOutCode
    })
  }, [])

  try {
    loadingElplus.value = true
    let {code, message} = await post({
      url: 'wms/GreyStockIn/insertList',
      data: parData,
    })
    if (code == 200) {
      loadingElplus.value = false
      getList()
      pageData.dialogFormVisible = false
      ElMessage.success('入库成功')
      return
    }
    ElMessage.error(message)
  } finally {
    loadingElplus.value = false
  }
}
const audit = async () => {
  let selsetionList = refgridOption.value.getSelectedRows()
  if (selsetionList.length == 0) {
    ElMessage.warning('请选择您的单据')
    return
  }
  ElMessageBox.confirm('确认通过审核吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'info',
  })
      .then(async () => {
        let parData = selsetionList.reduce((pre: any, cur: any) => {
          return pre.concat(cur.id)
        }, [])
        try {
          loadingElplus.value = true
          let {code, message} = await post({
            url: 'wms/GreyStockIn/setAudit',
            data: {ids: parData, auditState: 1},
          })
          if (code == 200) {
            loadingElplus.value = false
            ElMessage.success('审核成功')
            getList()
            return
          }
          ElMessage.error(message)
        } finally {
          loadingElplus.value = false
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消成功',
        })
      })
}
const focusShelve = async () => {
  try {
    pageData.loading = true
    let {code, data, message} = await post({
      url: 'wms/warehouse/getWarehouseByPara ',
      data: {virtuallyState: 0}
    })
    if (code == 200) {
      pageData.inShelveList = data
      pageData.loading = false
      return
    }
    ElMessage.error(message)
  } finally {
    pageData.loading = false
  }
}

const focusShelve2 = async () => {
  try {
    pageData.loading = true
    let {code, data, message} = await post({
      url: 'wms/warehouse/getWarehouseByPara',
      data: {virtuallyState: 0}
    })
    if (code == 200) {
      pageData.inShelveList2 = data
      pageData.loading = false
      return
    }
    ElMessage.error(message)
  } finally {
    pageData.loading = false
  }
}
const focusShelve1 = async () => {
  try {
    pageData.loading = true
    let {code, data, message} = await post({
      url: 'wms/shelve/getShelveByPara ',
      data: {warehouseId: form.value.warehouseId},
    })
    if (code == 200) {
      pageData.inShelveList1 = data
      pageData.loading = false
      return
    }
    ElMessage.error(message)
  } finally {
    pageData.loading = false
  }
}
const focusShelve3 = async () => {
  try {
    pageData.loading = true
    let {code, data, message} = await post({
      url: 'wms/shelve/getShelveByPara ',
      data: {warehouseId: form.value.warehouseId},
    })
    if (code == 200) {
      pageData.inShelveList3 = data
      pageData.loading = false
      return
    }
    ElMessage.error(message)
  } finally {
    pageData.loading = false
  }
}
//获取数据
const getList = async () => {
  console.log(activeNme.value)
  if (activeNme.value == '1') {
    query.stockInTypeId = 22
    query.stockOutTypeId = ''
    query.stockInType = '染厂退库'
    query.auditState = 0
    refgridOption.value.setQuery(query)
  }
  if (activeNme.value == '2') {
    query.stockInType = '染厂退库'
    query.stockOutTypeId = 22
    query.auditState = ''
    query.stockInTypeId = ''
    refgridOption1.value.setQuery(query)
  }
  if (activeNme.value == '3') {
    query.stockInType = '染厂退库'
    query.stockOutTypeId = 22
    query.auditState = 1
    query.stockInTypeId = ''
    refgridOption2.value.setQuery(query)
  }
}

//初始化
onMounted(() => {
  // getList()
})
</script>
<script lang="ts">
export default defineComponent({
  name: 'PibuRuku',
})
</script>
<style scoped>
.contioner {
  height: 100%;
  background: #fff;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>
  
